import { TextComponentProps } from 'cool-l-components'
import { h, VNode } from 'vue'
export interface PropsToForm {
  component: string;
  subComponent?: string;
  option?: { text: string | VNode; value: any }[];
  // value?: string;  //表单渲染才需要
  extraProps?: { [key: string]: any };
  text?: string;
  initalTransform?: (v: any) => any; //组件属性值进行初始化类型转换，以适配ant-design 组件库
  afterTransform?: (V: any) => any; //根据不同控件更新后返回的数据，进行对应转换，以取得画布需要的value
  valueProp?: string;
  eventName?: string;
  // events?: { [key: string]: any }; //表单渲染才需要
}
export type PropsToForms = {
  [p in keyof TextComponentProps]?: PropsToForm
}

const fontFamilyArr = [
  { text: '宋体', value: '"SimSun","STSong"' },
  { text: '黑体', value: '"SimHei","STHeiti"' },
  { text: '楷体', value: '"KaiTi","STKaiti"' },
  { text: '仿宋', value: '"FangSong","STFangsong"' }
]

//将字体text属性，转换成虚拟DOM节点(VNode)，以便在下拉选择时能展示字体样式
const fontFamilyOptions = fontFamilyArr.map(font => {
  return {
    value: font.value,
    // text: h('span', { style: { fontFamily: font.value } }, font.text)  //h()返回一个”虚拟节点“，通常缩写为 VNode
    text: (<span style={{ fontFamily: font.value }}>font.text</span>) as VNode  //jsx写法
  }
})

export const mapPropsToForms: PropsToForms = {
  text: {
    text: '文本',
    component: 'a-input',
    afterTransform: (e: any) => e.target.value
  },
  fontSize: {
    text: '字号',
    component: 'a-input-number',
    initalTransform: (v: string) => Number.parseInt(v),
    afterTransform: (e: number) => (e ? `${e}px` : '')
  },
  lineHeight: {
    text: '行高',
    component: 'a-slider',
    extraProps: { min: 0, max: 3, step: 0.1 },
    initalTransform: (v: string) => Number.parseFloat(v),
    afterTransform: (e: number) => e.toString()
  },
  textAlign: {
    component: 'a-radio-group',
    subComponent: 'a-radio-button',
    text: '对齐',
    option: [
      { value: 'left', text: '左' },
      { value: 'center', text: '中' },
      { value: 'right', text: '右' }
    ],
    afterTransform: (e: any) => e.target.value
  },
  fontFamily: {
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '字体',
    option: [{ text: '', value: '无' }, ...fontFamilyOptions]
  }
}
